<template>
  <h1>个人简历练习</h1>
  <table border="1px" align="center">
    <tr>
      <td>照片：</td>
      <td><img :src="person.picture" width="200px"></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="item in person.friend">{{item}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="load">点击加载</button>
</template>

<script setup>
import {ref} from "vue";

const person = ref({picture:'',name:'',age:'',friend:[]});
const  load = () =>{
  person.value = {
    picture:'fcq.jpg',
    name:'传奇',
    age:'18',
    friend:['范丞丞','陈立农','马嘉祺','丁晨曦']
  }
}
// const picture = ref('');
// const name = ref('');
// const age = ref('');
// const friend = ref([]);
// const friends = ['范丞丞','陈立农','马嘉祺','丁晨曦'];
// const load = () =>{
//   picture.value ='fcq.jpg';
//     name.value = '传奇';
//     age.value = '18';
//     friend.value = friends;
// }


</script>


<style scoped>

</style>